<template>
    <div :class="{modal: app.forgetFlag}">
        <div class="dialog-box side-card glass" v-show="app.forgetFlag === true">
            <n-input class="mt-10 input" placeholder="邮箱号" v-model:value="forgetForm.username"></n-input>
            <div style="display: flex">
                <n-input class="mt-10 input" placeholder="验证码" v-model:value="forgetForm.code"
                         style="width: calc(100% - 1rem)"></n-input>
                <button class="but mt-10" :disabled="flag" @click="sendCode">
                    {{ timer == 0 ? '发送' : `${timer}s` }}
                </button>
            </div>
            <n-input class="mt-10 input" type="password" show-password-on="click" placeholder="密码"
                     v-model:value="forgetForm.password"></n-input>
            <n-button class="mt-10 comm-submit" color="#CC57F3" @click="handleForget" :loading="loading" :round="true">
                <span class="edge"></span>
                <span class="front">哎 蠢</span>
            </n-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {getCode} from "@/api/login";
import {updateUserPassword} from "@/api/user";
import {UserForm} from "@/model";
import useStore from "@/store";
import {useIntervalFn} from "@vueuse/core";

const {app} = useStore();
const data = reactive({
    timer: 0,
    flag: false,
    loading: false,
    forgetForm: {
        email: "",
        password: "",
        code: "",
    } as UserForm,
});
const {timer, flag, loading, forgetForm} = toRefs(data);
const {pause, resume} = useIntervalFn(() => {
    timer.value--;
    if (timer.value <= 0) {
        // 停止定时器
        pause();
        flag.value = false;
    }
}, 1000, {immediate: false});
const start = (time: number) => {
    flag.value = true;
    timer.value = time;
    // 启动定时器
    resume();
};
const sendCode = () => {
    let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    if (!reg.test(forgetForm.value.email)) {
        window.$message?.warning("邮箱格式不正确");
        return;
    }
    start(60);
    getCode(forgetForm.value.email).then(({data}) => {
        if (data.flag) {
            window.$message?.success("发送成功");
        }
    });
};
const handleForget = () => {
    if (forgetForm.value.code.trim().length != 6) {
        window.$message?.warning("请输入6位验证码");
        return;
    }
    if (forgetForm.value.password.trim().length < 6) {
        window.$message?.warning("密码不能少于6位");
        return;
    }
    loading.value = true;
    updateUserPassword(forgetForm.value).then(({data}) => {
        if (data.flag) {
            window.$message?.success("修改成功");
            forgetForm.value = {
                email: "",
                password: "",
                code: "",
            }
            app.setForgetFlag(false);
        }
        loading.value = false;
    });
};
const dialogVisible = computed({
    get: () => app.forgetFlag,
    set: (value) => app.forgetFlag = value,
});
</script>

<style scoped>
.but {
    border-radius: 0 0.1rem 0.1rem 0;
}
</style>